<!--  -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple left">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>欢迎使用</span>
            </div>
            <div v-for="o in welcomeTest" :key="o" class="text item">
              {{ o }}
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light right">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>注意事项</span>
            </div>
            <div v-for="o in foucsTest" :key="o" class="text item">
              {{ o }}
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "WelcomeTest",
  data() {
    return {
      welcomeTest: [
        "本系统技术栈:",
        "后端：",
        "springboot + spring security + spring data",
        "前端：",
        "vue  + element ui",
        "移动端",
        "Flutter",
      ],
      foucsTest: [
        "1:禁止一些不良的言论",
        "2:维护网络环境，从我做起",
        "3:防下塔",
      ],
    };
  },
};
</script>

<style lang="less"  scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.left .text:nth-child(odd) {
  font-size: 14px;
  color: rgb(209, 168, 32);
}

.right .text{
    font-size: 14px;
    color: red;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  // 水平居中
  margin:0 auto ;    
}


</style>
